<template>
  <section class="page" style="overflow: hidden">
    <headerbar
      >通知公告
      <span v-if="permission" @click="goAddNotice()" class="head-btn" slot="btn"
        ><strong>+</strong>新增</span
      >
      <!-- <div class="header-right" slot="btn">
        <div class="message" v-if="count !== 0"><img src="../../../../static/images/dangjian/home/msg.png" alt=""> <i class="number">{{count === 0 ? '':count}}</i></div>
        <span v-if="permission" @click="goAddNotice()" class="head-btn">添加</span>
      </div>-->
    </headerbar>

    <div v-if="tabIndex == 0" id="receive" class="mui-active">
      <ul class="tab" v-if="permission">
        <li @click="receive()" :class="{ active: tabIndex == 0 }">
          <span>我的收到</span>
        </li>
        <li @click="send()" :class="{ active: tabIndex == 1 }">
          <span>我的发起</span>
        </li>
      </ul>
      <div class="select-box">
        <div class="state-box">
          <select
            name="select"
            class="select"
            v-model="selectChange"
            @change="receive"
          >
            <option value="">全部</option>
            <option value="0">未读</option>
            <option value="1">已读</option>
          </select>
          <img src="../../../../static/images/arrow_down.png" alt="" />
        </div>
        <div class="btn-box">
          <input
            class="select-btn"
            type="text"
            v-model="inputTitle"
            placeholder="请输入关键词搜索"
          />
          <img src="../../../../static/images/select.png" alt="" />
        </div>
        <span @click="receive">搜索</span>
      </div>
      <div class="d-scroll list-text" style="">
        <cube-scroll ref="scroll" :options="options" @pulling-up="onPullingUp" @pulling-down="onPullingDown">
          <cube-swipe :key="newmemorabilias">
            <fetchData
              v-if="isLoading"
              :loading="isLoading"
              :data="swipeData"
            ></fetchData>
            <abnormal @refresh="receive" v-if="abnormal"></abnormal>
            <transition-group name="swipe" tag="div">
              <div
                class=""
                v-for="(data, index) in swipeData"
                :key="data.msgId"
              >
                <cube-swipe-item
                  ref="swipeItem"
                  :btns="data.btns"
                  :index="index"
                  @btn-click="receiveAction"
                >
                  <div @click="goDetail(data,index)" class="tongzhi-item">
                    <!--                    <div class="icon"></div>-->
                    <!--                    <div class="cont">-->
                    <!--                      <h1 class="pdb-3">{{data.title}}</h1>-->
                    <!--                      <div class="color-tip">类型：{{data.msgTypeName}}</div>-->
                    <!--                      <div class="color-tip">状态：<span :class="fontColor(data)">{{isRead(data)}}</span></div>-->
                    <!--                      <div class="color-tip">{{getTime(data.createTime)}}</div>-->
                    <!--                      <div class="look-more">查看详情 <i class="icon-arrow"><img src="../../../../static/images/dangjian/dangwu/arrow-left.png" alt=""></i></div>-->
                    <!--                    </div>-->
                    <div class="icon" :style="getMyColor(data)">
                      {{ getWritten(data) }}
                    </div>
                    <div class="cont">
                      <h1>
                        {{ data.msgTypeName }}
                        <span class="topSpan">查看详情 >></span>
                      </h1>
                      <div class="color-tip">标题：{{ data.title }}</div>
                      <div class="color-tip">
                        状态：<span :class="fontColor(data)">{{
                          isRead(data)
                        }}</span>
                      </div>
                      <div class="color-tip">
                        发送时间：{{ getTime(data.createTime) }}
                      </div>
                      <div class="color-tip"></div>
                      <!--                      <div class="look-more">查看详情 <i class="icon-arrow"><img src="../../../../static/images/dangjian/dangwu/arrow-left.png" alt=""></i></div>-->
                    </div>
                  </div>
                </cube-swipe-item>
              </div>
            </transition-group>
          </cube-swipe>
          <!-- W noData -->
          <noData
            v-if="!abnormal && !isLoading && swipeData.length === 0"
          ></noData>
          <onBottom v-else-if="onBottom"></onBottom>
          <div data-v-ae410530="" class="pdv-10"></div>
          <div data-v-ae410530="" class="pdv-10"></div>
        </cube-scroll>
      </div>
    </div>
    <div v-if="tabIndex == 1" id="send" class="mui-active">
      <ul class="tab" v-if="permission">
        <li @click="receive()" :class="{ active: tabIndex == 0 }">
          <span>我的收到</span>
        </li>
        <li @click="send()" :class="{ active: tabIndex == 1 }">
          <span>我的发起</span>
        </li>
      </ul>
      <div class="d-scroll list-text" style="">
        <cube-scroll
          ref="scroll"
          :options="launchOptions"
          @pulling-up="launchOnPullingUp"
          @pulling-down="launchOnPullingDown"
        >
          <cube-swipe :key="newmemorabilias">
            <fetchData
              v-if="isLoading"
              :loading="isLoading"
              :data="sendSwipeData"
            ></fetchData>
            <abnormal @refresh="send" v-if="abnormal"></abnormal>
            <transition-group name="swipe" tag="div">
              <div
                class=""
                v-for="(data, index) in sendSwipeData"
                :key="data.msgId"
              >
<!--                <cube-swipe-item ref="swipeItem" :btns="data.btns"-->
<!--                                 @btn-click="sendAction" :index="index">-->
                  <cube-swipe-item ref="swipeItem" :index="index">
                  <div @click="goDetail(data)" class="tongzhi-item">
                    <!--                    <div class="icon"></div>-->
                    <!--                    <div class="cont">-->
                    <!--                      <h1>{{data.title}}</h1>-->
                    <!--                      <div class="color-tip">类型：{{data.msgTypeName}}</div>-->
                    <!--                      <div class="color-tip">{{getTime(data.createTime)}}</div>-->
                    <!--                      <div class="look-more">查看详情 <i class="icon-arrow"><img src="../../../../static/images/dangjian/dangwu/arrow-left.png" alt=""></i></div>-->
                    <!--                    </div>-->
                    <div class="icon" :style="getMyColor(data)">
                      {{ getWritten(data) }}
                    </div>
                    <div class="cont">
                      <h1>
                        {{ data.msgTypeName }}
                        <span class="topSpan">查看详情 >></span>
                      </h1>
                      <div class="color-tip">标题：{{ data.title }}</div>
                      <div class="color-tip">
                        发送时间：{{ getTime(data.createTime) }}
                      </div>
                      <div class="color-tip"></div>
                    </div>
                  </div>
                </cube-swipe-item>
              </div>
            </transition-group>
          </cube-swipe>
          <!-- <div
            class="text-center no-data"
            :loading="isLoading"
            v-if="!abnormal && !isLoading && sendSwipeData.length === 0"
          >
            <img src="../../../../static/images/no_data.png" alt="" />
            <p>暂无数据</p>
          </div> -->
          <!-- W noData -->
          <noData
            v-if="!abnormal && !isLoading && sendSwipeData.length === 0"
          ></noData>
          <onBottom v-else-if="onBottom"></onBottom>
          <div data-v-ae410530="" class="pdv-10"></div>
        </cube-scroll>
      </div>
    </div>
  </section>
</template>

<script>
import tools from "@/utils/tools";
import api from "@/common/config/api";
import loginService from "@/service/loginService";
import moment from "moment";
export default {
  name: "noticeNotice",
  data() {
    return {
      inputTitle: "",
      selectChange: "",
      countNum: true,
      abnormal: false,
      isLoading: true,
      fn: tools,
      pageIndex: 1,
      launchPageIndex: 1,
      tabIndex: 0,
      options: {
        pullUpLoad: true,
        scrollbar: false,
        pullDownRefresh: {
          threshold: 90,
          stop: 0,
          txt: ' '
        },
      },
      onBottom: false, // W onBottom
      launchOptions: {
        pullUpLoad: true,
        scrollbar: false,
        pullDownRefresh: {
          threshold: 90,
          stop: 0,
          txt: ' '
        },
      },
      swipeData: [],
      sendSwipeData: [],
      permission: false,
      count: 0,
      newmemorabilias: "",
    };
  },
  created() {
    console.log('noticeNotice created')
    this.$route.meta.keepAlive = true
    this.userInfo = this.$localStorage.get("userInfo");
    this.countNum = true;
    this.nodeMsgPrem();
    this.receiveData();
    // this.countUnRead()
  },
    /* beforeRouteEnter (to, from, next) {
      next(vm => {
        if (to.name === 'noticeNotice') {
          to.meta.keepAlive = true
          vm.$store.commit('addRoute', 'noticeNotice')
        }
        next()
      })
    }, */
  beforeRouteLeave(to, from, next) {
    this.$route.meta.keepAlive = to.name === 'noticeNoticeDetail'
    if(this.$route.meta.keepAlive) {
      this.$store.commit('addRoute','noticeNotice')
    }else {
      this.$store.commit('removeRoute','noticeNotice')
      this.$destroy()
    }
    next()
  },
  methods: {
    receive() {
      this.launchOptions.pullUpLoad = true;
      this.countNum = true;
      this.swipeData = [];
      this.tabIndex = 0;
      this.pageIndex = 1;
      this.receiveData();
    },
    send() {
      this.options.pullUpLoad = true;
      this.countNum = true;
      this.sendSwipeData = [];
      this.tabIndex = 1;
      this.launchPageIndex = 1;
      this.sendData();
    },
    receiveData() {
      this.onBottom = false;
      this.abnormal = false;
      this.isLoading = true;
      let data = {
        loginId: "20160503155632000078",
        pageNo: this.pageIndex + "",
        pageSize: "20",
        title: this.inputTitle,
        readResult: this.selectChange,
      };
      if (this.countNum) {
        this.fetchService.myReceiveList(data).then((res) => {
          this.isLoading = false;
          if (res.code == 444) {
            this.abnormal = true;
            return;
          }
          if (res.code != 0) {
            return false;
          }
          if (res.code === 0 && res.data.length < 1) {
            this.countNum = false; // 将上拉刷新禁用
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
            return;
          }
          this.pageIndex++;
          res.data.forEach((v, i) => {
            v.btns = [];
            v.btns.push({
              receiveAction: "receiveDeleteItem",
              text: "删除",
              color: "#ec5563",
            });
          });
          this.isLoading = false;
          this.swipeData = this.swipeData.concat(res.data || []);
          setTimeout(() => {
            this.$refs.scroll.forceUpdate &&
              this.$refs.scroll.forceUpdate(true, false);
          }, 100);
        });
      } else {
        this.isLoading = false;
        this.onBottom = true;
        this.options.pullUpLoad = false;
      }
    },
    sendData() {
      this.onBottom = false;
      this.abnormal = false;
      this.isLoading = true;
      this.tabIndex = 1;
      let data = {
        loginId: "3750",
        pageNo: this.launchPageIndex + "",
        pageSize: "20",
      };
      if (this.countNum) {
        this.fetchService.mySendList(data).then((res) => {
          this.isLoading = false;
          if (res.code == 444) {
            this.isLoading = false;
            this.abnormal = true;
            return;
          }
          if (res.code === 0 && res.data.length < 1) {
            this.countNum = false; // 将上拉刷新禁用
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
            return;
          }
          this.launchPageIndex++;
          res.data.forEach((v, i) => {
            v.btns = [];
            v.btns.push({
              sendAction: "sendDeleteItem",
              text: "删除",
              color: "#ec5563",
            });
          });
          this.sendSwipeData = this.sendSwipeData.concat(res.data || []);
          setTimeout(() => {
            this.$refs.scroll.forceUpdate &&
              this.$refs.scroll.forceUpdate(true, false);
          }, 100);
        });
      } else {
        this.isLoading = false;
        this.onBottom = true;
        this.launchOptions.pullUpLoad = false;
      }
    },
    receiveDeleteItem(item, index) {
      this.alertDialog(item, index, this.swipeData);
    },
    deleteItem(item, index, data) {
      // this.tools.showLoading();
      let params1 ={
        businessId: item.msgId,
        isDel:'1',
        isRead: '1',
        recUserId: this.userInfo.id
      }
      // if(this.tabIndex === 0){//删除我的收到
      if(true){//删除我的收到以及我的发起
        let params2 ={ //用于删除接受消息的人员
          msgId: item.msgId,
          userId: this.userInfo.id
        }
        this.fetchService.delMsgMyReceive(params2).then((res) => {
        })
      }else if(this.tabIndex === 1){//删除我的发起
        this.fetchService.updateNodeMsgDel(item.msgId).then((res) => {
          // this.tools.hideLoading();
          if (res.code !== 0) {
            return this.tools.tip(res.message);
          }
        });
      }
      this.fetchService.updateReadByBusinessId(params1).then((res) => {});//调用首页的删除
      data.splice(index, 1);
      this.tools.tip("删除成功");
      this.newmemorabilias = Date.now();
    },
    sendDeleteItem(item, index) {
      this.alertDialog(item, index, this.sendSwipeData);
    },
    receiveAction(btn, index) {
      let item = this.swipeData[index];
      this[btn.receiveAction](item, index);
    },
    sendAction(btn, index) {
      let item = this.sendSwipeData[index];
      this[btn.sendAction](item, index);
    },
    onPullingUp() {
      console.log("onPullingUp");
      this.receiveData();
    },
    onPullingDown() {
      this.options.pullUpLoad = true
      this.onBottom = false
      this.countNum = true;
      this.swipeData = []
      console.log('onPullingDown')
      this.pageIndex = 1
      this.receiveData()
    },
    launchOnPullingUp() {
      console.log("launchOnPullingUp");
      this.sendData();
    },
    launchOnPullingDown() {
      this.launchOptions.pullUpLoad = true
      this.onBottom = false
      this.countNum = true;
      this.sendSwipeData = []
      console.log('onPullingDown')
      this.launchPageIndex = 1
      this.sendData();
    },
    goDetail(data,index) {
      if (this.tabIndex === 0 && data.readResult === "0") {
        this.swipeData[index].readResult = '1'
        this.$store.state.showFeedback = true;
        this.optNodeMsgRead(data.msgId);
      } else {
        this.$store.state.showFeedback = false;
      }
      this.$router.push({
        path: `/noticeNoticeDetail/${data.msgId}/${this.tabIndex}`,
      });
    },
    getTime(createTime) {
      return moment(createTime).format("YYYY年MM月DD日 HH:mm:ss");
    },
    isRead(data) {
      if (data.readResult === "0") {
        return "未读";
      } else {
        return "已读";
      }
    },
    getWritten(data) {
      // 获取文字
      let name = "通知";
      if ("tzgg" == data.msgType) {
        //通知公告
        name = "通知";
      } else if ("hjtx" == data.msgType) {
        //换届通知
        name = "换届";
      } else if ("hytx" == data.msgType) {
        //会议提醒
        name = "提醒";
      } else if ("zzsh" == data.msgType) {
        //会议通知(组织生活发起后的会议通知)
        name = "会议";
      } else if ("fkqk" == data.msgType) {
        //反馈情况
        name = "反馈";
      }
      return name;
    },
    getMyColor(data) {
      // 获取颜色
      let myColor = {
        //默认颜色/api-user/userExt/party/birthday/
        background: "#2CAAFD",
      };
      if ("tzgg" == data.msgType) {
        myColor.background = "#00c1de";
      } else if ("hjtx" == data.msgType) {
        myColor.background = "#de6d00";
      } else if ("hytx" == data.msgType) {
        myColor.background = "#de6d00";
      } else if ("zzsh" == data.msgType) {
        myColor.background = "#638f24";
      } else if ("fkqk" == data.msgType) {
        myColor.background = "#2365b2";
      }
      return myColor;
    },
    optNodeMsgRead(msgId) {
      let data = {
        msgId: msgId,
      };
      let params1 ={
        businessId: msgId,
        isRead: "1",
        recUserId: this.userInfo.id
      }
      this.fetchService.optNodeMsgRead(data).then((res) => {});//调用党务的已读
      this.fetchService.updateReadByBusinessId(params1).then((res) => {});//调用首页的已读
    },
    nodeMsgPrem() {
      let data = {
        loginId: this.userInfo.id,
      };
      this.fetchService.nodeMsgPrem2(data).then((res) => {
        if (res.code === 0) {
          this.permission = res.data.power;
          // userType dzb:党支部管理员，dzbUp:党支部上级管理员
          // 判断是否为党支部
          this.$store.state.isDang = res.data.userType === "dzb";
        }
      });
    },
    goAddNotice() {
      delete this.$store.state.organizationalLifeAddData;
      delete this.$store.state.checkedListattendUserName;

      if (this.permission && this.$store.state.isDang) {
        this.$store.state.flagType = true;
        this.$router.push({ path: `/noticeNoticeAdd/2` });
        return;
      }
      let _this = this;
      this.$createDialog({
        type: "confirm",
        title: "选择通知类型",
        showClose: true,
        content: "",
        confirmBtn: {
          text: "组织通知",
          active: false,
          disabled: false,
          href: "javascript:;",
        },
        cancelBtn: {
          text: "党员通知",
          active: false,
          disabled: false,
          href: "javascript:;",
        },
        onClose: () => {},
        onConfirm: () => {
          this.$store.state.flagType = true;
          this.$router.push({ path: `/noticeNoticeAdd/1` });
        },
        onCancel: () => {
          this.$store.state.flagType = true;
          this.$router.push({ path: `/noticeNoticeAdd/2` });
        },
      }).show();
    },
    countUnRead() {
      let data = {
        loginId: this.userInfo.id,
      };
      this.fetchService.countUnRead(data).then((res) => {
        if (res.code === 0) {
          this.count = res.data;
        } else {
          this.tools.tip(res.message);
        }
      });
    },
    fontColor(status) {
      let colorName = {
        0: "color-red",
        1: "color-green",
      };
      console.log(colorName[status.readResult]);
      return colorName[status.readResult];
    },
    alertDialog(item, index, data) {
      let _this = this;
      this.$createDialog({
        type: "confirm",
        icon: "",
        title: "温馨提示",
        content: "确定删除吗？",
        confirmBtn: {
          text: "确定",
          active: true,
          disabled: false,
          href: "javascript:;",
        },
        cancelBtn: {
          text: "取消",
          active: false,
          disabled: false,
          href: "javascript:;",
        },
        onConfirm: () => {
          _this.deleteItem(item, index, data);
        },
        onCancel: () => {},
      }).show();
    },
  },
};
</script>

<style scoped lang="scss">
.tab {
  margin-bottom: 0;
}
.header-right {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate3d(0, -50%, 0);
  .message {
    position: absolute;
    top: 0;
    right: 130px;
    margin: 0;
    transform: translateY(-50%);
  }
}
.select-box {
  width: 100%;
  height: 90px;
  background: #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 2%;
  .state-box {
    position: relative;
    img {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 16px;
      width: 20px;
    }
    .select {
      width: 128px;
      height: 50px;
      line-height: 50px !important;
      padding-top: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      background: #ffffff;
      border: 1px solid #9a9a9a !important;
      border-radius: 10px;
    }
  }

  .btn-box {
    position: relative;
    width: 60%;
    .select-btn {
      width: 100%;
      height: 50px;
      background: #ffffff;
      border: 1px solid #9a9a9a;
      border-radius: 10px;
      margin-bottom: 0;
      padding: 10px 10px 10px 50px;
    }
    img {
      position: absolute;
      width: 25px;
      top: 50%;
      transform: translateY(-50%);
      left: 15px;
    }
  }

  span {
    font-size: 14PX;
    color: #e20002;
  }
}

strong {
  font-size: 17PX;
  margin-right: 2px;
}
</style>
